{% extends "base.html" %}

{% block content %}
<script src='/static/js/jquery-1.2.1.pack.js'></script>
<script language=javascript>
var roleids = [{{rolelist.role_ids}}]
if(!Array.prototype.indexOf){  
	Array.prototype.indexOf = function(val){  
	   var value = this;  
	   for(var i =0; i < value.length; i++){  
		  if(value[i] == val) return i;  
	   }  
	   return -1;  
	};  
} 
$(window).ready(function(){
	$('input[type="checkbox"]').each(function(){
		var code = parseInt($(this).val())
		if(roleids.indexOf(code) != -1){
			this.checked = true
		}
	})
	
	$('div .title1').each(function(){
			if($(this).find('input').length == $(this).find('input:checked').length){
				$(this).children('span.selall').addClass('chanel')
				$(this).children('span.selall').html('取消')
			}else{
				$(this).children('span.selall').attr('class','selall')
				$(this).children('span.selall').html('全选')
			}
	})

	$('input[type="checkbox"]').click(function(){
		if(this.checked == false){
			$(this).parent().find('input').attr('checked',false)
			$(this).parents('div').children('span.selall').attr('class','selall')
			$(this).parents('div').children('span.selall').html('全选')
		}
		if(this.checked == true){
			$(this).parents('div').children('input').attr('checked',true)
			if($(this).parents('div').find('input').length == $(this).parents('div').find('input:checked').length){
				$(this).parents('div').children('span.selall').addClass('chanel')
				$(this).parents('div').children('span.selall').html('取消')
			}else{
				$(this).parents('div').children('span.selall').attr('class','selall')
				$(this).parents('div').children('span.selall').html('全选')
			}
		}
	})

	$('span.selall').click(function(){
		if($(this).attr('class') == 'selall'){
			$(this).parents('div').find('input').attr('checked',true)
			$(this).addClass('chanel')
			$(this).html('取消')
		}else{
			$(this).parents('div').find('input').attr('checked',false)
			$(this).attr('class','selall')
			$(this).html('全选')
		}
	})
	
	/* 
	$('span.selprev').click(function(){
		if($(this).prev('input[type="checkbox"]:checked').length > 0){
			$(this).prev('input[type="checkbox"]').attr('checked',false)
		}else{
			$(this).prev('input[type="checkbox"]').attr('checked',true)
		}
		$(this).prev('input[type="checkbox"]').click();
	})
	*/
})

function verify(form){
  if(form.name.value==""){
	alert("Enter the name please!");
	form.name.focus();		
       return false;
	}
  if(form.code.value==""){
	alert("Choose code please");
	form.code.focus();		
       return false;
	}

return true;
 }

</script>
<style>
.left{
	float:left;
	margin-left:15px;
}
.title1{
	float:left;
	width:99%;
	margin:2px;
	padding:1px;
	height:auto !important;
	border:1px solid gray;
}
.title2{
	float:left;
}
.selall{
	color:blue;
	cursor:pointer;
}
.chanel{color:green;cursor:pointer;}

</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
<form name='form1' id='form1' action="/saveroles/" method='post' onsubmit='return verify(this);'>
<table width='80%' class='grid' cellspacing='1' align='center'>
<tr><td colspan='2' class='title'>Add/Edit User Role</td></tr>
<tr valign='middle' align='left'></tr>
<tr valign='middle' align='left'>
<td class='odd' width='10%'><font color="red">*</font>Name:</td>
<td class='even'><input type="text" name="name" value="{{rolelist.name}}" /></td></tr>
<td class='odd' width='10%'><font color="red">*</font>Role Info:</td>
<td class='even' align='left'>
	{% for roles in roles %}
		<div class='' style='width:100%;margin-top:3px;margin:auto;height:auto !important;margin-left:1px;'>
			<div class='title1'><input type='checkbox' name='roles' value='{{roles.code}}'>&nbsp;<span class='selprev'>{{roles.title}}</span>&nbsp;&nbsp;&nbsp;[<span class="selall">全选</span>]
			{% for roles_con in roles.content %}
				<div class='title2' style="width:100%;padding-left:20px;height:auto !important;">
				{% if roles_con.type %}
					<div class='left' style=""><input type='checkbox' name='roles' value='{{roles_con.code}}'>&nbsp;<span class='selprev'>{{roles_con.title}}</span></div>
				{%else%}
					<input type='checkbox' name='roles' value='{{roles_con.code}}'>&nbsp;<span class='selprev'>{{roles_con.title}}</span>
					<div style='padding-left:20px;'>
						{% for roles_con_c in roles_con.content %}
							<div class='left' style=""><input type='checkbox' name='roles' value='{{roles_con_c.code}}'>&nbsp;<span class='selprev'>{{roles_con_c.title}}</span></div>
						{%endfor%}
					</div>
				{%endif%}
				</div>
			{%endfor%}
			</div>
		</div>
	{%endfor%}
</td></tr>
{% if rolelist.id %}
<input type="hidden" name="id" value="{{rolelist.id}}" />
{% endif %}
<tr valign='middle' align='left'><td class='odd'></td>
	<td class='even'>&nbsp;<input type='submit' class='button' name='submit'  id='submit' value=' Submit '  />&nbsp;&nbsp;
	{% if not rolelist.id %}
	<input type='reset' class='button' name='reset'  id='reset' value=' Reset ' />
	{% endif%}
	<input type='button' class='button' name='back'  id='reset' value=' Back ' onclick="javascrip:history.back(1)" />
	</form>
	</td>
</tr>
{% if errormsg %}
<tr valign='middle' align='left'><td class='odd'><font color="red">Error infomation</font></td>
<td class='even'><font color="red">{{errormsg}}</font></td></tr>
{% endif %}
</table>

{% endblock %}

